<template>
  <!-- 来自gpt的回答: -->
  <!-- 在 Vue 中，`v-bind="$attrs"` 是将未被组件 props (属性) 接收的属性绑定到这个组件上。而
     `:loading="loading"` 是明确地将 `loading` prop 绑定到 `el-button` 组件上。
    如果 `$attrs` 中也有一个 `loading` 属性，那么它将不会覆盖 `:loading="loading"`。
    这是因为 Vue 的设计决定了明确绑定的 prop 优先级高于 `v-bind="$attrs"` 中的属性。

    所以，即使 `$attrs` 中也有 `loading` 属性，`el-button` 的 `loading` prop 的值仍将是 `:loading="loading"` 中定义的 `loading`。

    但是，请注意，这是 Vue 2 的行为。在 Vue 3 中，`v-bind="$attrs"` 不再排除 `props` 中定义的属性，
    因此你需要明确使用 `inheritAttrs: false` 选项来排除 `props` 中的属性。

    如果你在 Vue 3 中使用同样的代码，`$attrs` 中的 `loading` 将会覆盖 `:loading="loading"`，除非你在组件选项中设置了 `inheritAttrs: false`。
   -->
  <el-button :loading="loading" v-bind="$attrs" @click="handleClick">
    <template v-for="name in Object.keys($slots)" #[name]>
      <slot :name="name"></slot>
    </template>
  </el-button>
</template>
<script setup lang="ts">
import { watch, ref } from 'vue'
import { useAppStore } from '@/store/modules/app.ts'
defineOptions({ name: 'XuButton' })
const $emit = defineEmits(['click'])
let appStore = useAppStore()
let loading = ref(false)
let currentClick = ref(false)

watch(
  () => appStore.btnLoading,
  (val) => {
    // 只有当前点击的按钮才出现loading转圈，不然一发请求所有按钮都转圈
    if (currentClick.value) loading.value = val
    // 只有请求结束后才重置siClick状态
    if (!val) currentClick.value = false
  },
)
function handleClick($event: MouseEvent) {
  currentClick.value = true
  $emit('click', $event)
}
</script>
<style lang="scss" scoped></style>
